<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>运费订单</title>
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/theme-chalk/index.css"
    />
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css"
    />

    <style>
      .el-select-dinwei .el-select-dropdown {
        left: -40% !important;
      }
      .search-bar {
        display: flex;
        padding: 10px;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 999;
      }
      .action-container {
        padding: 10px;
        position: sticky;
        bottom: 0px;
        background: #fff;
        z-index: 999;
      }
      .u-flex {
        display: flex;
      }
      .u-row-around {
        justify-content: space-around;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
      }

      #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="u-p-t-15">
        <div class="search-bar d-flex u-m-b-10 u-col-center isHeader">
          <span
            class="u-m-l-20"
            style="align-items: center; display: flex; margin-right: auto"
          >
            <template v-if="mode === 'add'">
              <el-tag class="u-m-t-2" size="mini" type="success"
                >运费订单-新增</el-tag
              >
            </template>
            <template v-if="mode === 'edit'">
              <el-tag class="u-m-t-2" size="mini">运费订单-编辑</el-tag>
            </template>
            <template v-if="mode === 'details'">
              <el-tag class="u-m-t-2" size="mini" type="info"
                >运费订单-详情</el-tag
              >
            </template>
          </span>
        </div>
        <div ref="formHeight" class="print-container">
          <el-form
            size="small"
            label-width="8em"
            label-position="right"
            style="padding: 5px 25px 0 5px"
          >
            <el-row>
              <el-col :span="24" v-if="mode === 'add'">
                <el-form-item label="模版导入">
                  <el-select
                    v-model="Mobandaoru"
                    placeholder="模版导入"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                    @change="handleMobandaoruChange"
                  >
                    <el-option
                      v-for="item in formOptions.templateNamedaoruOptiopns"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属组织" required>
                  <el-select
                    v-model="formData.Company_Code"
                    placeholder="所属组织"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                  >
                    <el-option
                      v-for="item in formOptions.CompanyCodeOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="客户简称" required>
                  <el-select
                    class="el-select-dinwei"
                    v-model="formData.SDAN8"
                    :popper-append-to-body="false"
                    placeholder="客户简称"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                    @change="handleKehujianchengChange"
                  >
                    <el-option
                      @click.native="handleKehujianchengClick('SDAN8T','ADD_Description1',item)"
                      v-for="item in formOptions.kehujianchengOptiopns"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="装货地点">
                  <el-select
                    v-model="formData.SouAddCode"
                    placeholder="装货地点"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      @click.native="handleKehujianchengClick('SouAddName','ShortName',item)"
                      v-for="item in formOptions.shenqingrenOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="卸货地点" required>
                  <el-select
                    v-model="formData.SDPA8"
                    placeholder="卸货地点"
                    :style="{ width: '100%' }"
                    :disabled="isFormDataDisabled"
                    filterable
                  >
                    <el-option
                      @click.native="handleKehujianchengClick('SDPA8T','ADD_SearchCode',item)"
                      v-for="item in formOptions.xiehuojianchengOptiopns"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="产品" required>
                  <el-select
                    v-model="formData.SDLITM"
                    placeholder="产品"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.jiayoukaOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="要求装货时间" required>
                  <el-date-picker
                    v-model="formData.SouRDT"
                    :disabled="isFormDataDisabled"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="要求装货时间"
                    :style="{ width: '100%' }"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="要求卸货时间" required>
                  <el-date-picker
                    v-model="formData.SDTRDT"
                    :disabled="isFormDataDisabled"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="要求卸货时间"
                    :style="{ width: '100%' }"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="订单数量">
                  <div style="display: flex">
                    <el-input-number
                      v-model="formData.SDUORG"
                      :disabled="isFormDataDisabled"
                      controls-position="right"
                      :style="{ width: '50%' }"
                      :controls="false"
                      class="inputNumAlign_left"
                      @change="amount_fun"
                      placeholder="订单数量"
                    >
                    </el-input-number>
                    <el-select
                      v-model="formData.SDUOM"
                      placeholder="单位"
                      :disabled="isFormDataDisabled"
                      :style="{ width: '50%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in formOptions.danweiOptions"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="运费单价">
                  <el-input-number
                    v-model="formData.SDUPRC"
                    :disabled="isFormDataDisabled"
                    @change="amount_fun"
                    controls-position="right"
                    :style="{ width: '100%' }"
                    :controls="false"
                    class="inputNumAlign_left"
                    placeholder="运费单价"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="订单金额">
                  <el-input-number
                    v-model="formData.SDAEXP"
                    :disabled="isFormDataDisabled"
                    :controls="false"
                    class="inputNumAlign_left"
                    placeholder="订单金额"
                    controls-position="right"
                    :style="{ width: '100%' }"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <!-- TODO -->
              <el-col :span="24">
                <el-form-item label="计费方式">
                  <div style="display: flex">
                    <el-select
                      v-model="formData.sdsm"
                      placeholder="计费方式"
                      :disabled="isFormDataDisabled"
                      @change="amount_fun"
                      :style="{ width: '33%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in TYJSFS.jffs"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="formData.sdtom"
                      placeholder="里程类型"
                      :disabled="isFormDataDisabled"
                      @change="amount_fun"
                      :style="{ width: '33%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in TYJSFS.lclx"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="formData.sdlorun"
                      placeholder="计费重量"
                      :disabled="isFormDataDisabled"
                      :style="{ width: '33%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in TYJSFS.jfzl"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="业务类型">
                  <el-select
                    v-model="formData.BusinessType"
                    placeholder="业务类型"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in formOptions.yewuleixingOptions"
                      :key="index"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="客户订单号">
                  <el-input
                    v-model="formData.SDCUSDOC"
                    :disabled="isFormDataDisabled"
                    placeholder="客户订单号"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="装货备注">
                  <el-input
                    v-model="formData.SouRemark"
                    :disabled="isFormDataDisabled"
                    placeholder="装货备注"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="卸货备注">
                  <el-input
                    v-model="formData.SDSPECRDT"
                    :disabled="isFormDataDisabled"
                    placeholder="卸货备注"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="action-container u-flex u-row-around">
          <el-button type="info" plain size="mini" @click="close"
            >关闭</el-button
          >
          <template
            v-if="
                mode !== 'dateils'
            "
          >
            <el-button
              type="primary"
              :loading="isLoadingBtn"
              size="mini"
              @click="submit"
              >提交</el-button
            >
          </template>
        </div>
      </div>
    </div>
    <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
    <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/index.js"></script>

    <script>
      let baseUrl = "https://www.51yunmai.com";
      /**
       * 转换URL参数
       */
      function queryToObject() {
        const res = {};
        const search = location.search.substr(1); // 返回类似于 a=10&b=20&c=30
        const paramArr = search.split("&");
        paramArr.forEach(function (item) {
          const itemArr = item.split("=");
          const key = itemArr[0];
          const value = itemArr[1];
          res[key] = value;
        });
        return res;
      }
      Vue.use(ELEMENT);
      let nuteidm = (i, id, name) => {
        return {
          ID: i[id],
          Name: i[name],
          ...i,
        };
      };

      new Vue({
        el: "#app",
        data() {
          return {
            mode: "",
            queryOptionMap: {
              kehujianchengOptiopnMap: {},
              templateNamedaoruOptiopnsMap: {},
            },
            Mobandaoru: "",
            formData: {
              Company_Code: undefined,
              SDAN8: undefined,
              SDAN8T: undefined,
              SouAddCode: undefined,
              SouAddName: undefined,
              SDPA8: undefined,
              SDPA8T: undefined,
              SDLITM: undefined,
              sdsm: undefined,
              sdtom: undefined,
              sdlorun: undefined,
              SDUORG: undefined,
              SDUOM: undefined,
              SDUPRC: undefined,
              SDAEXP: undefined,
              SDCUSDOC: undefined,
              SouRemark: undefined,
              SDSPECRDT: undefined,
              BusinessType: undefined,
              SouRDT: undefined,
              SDTRDT: undefined,
            },

            formOptions: {
              CompanyCodeOptions: [],
              danweiOptions: [],
              kehujianchengOptiopns: [],
              templateNamedaoruOptiopns: [],
              shenqingrenOptions: [],
              xiehuojianchengOptiopns: [],
              chufadiOptions: [],
              lichenleifOptions: [],
              jifeifjOptions: [],
              jiayoukaOptions: [],
              yewuleixingOptions: [],
            },
            yuanOptions: {
              CompanyCodeOptions: [],
              kehujianchengOptiopns: [],
              templateNamedaoruOptiopns: [],
              shenqingrenOptions: [],
              xiehuojianchengOptiopns: [],
              chufadiOptions: [],
              lichenleifOptions: [],
              jifeifjOptions: [],
              jiayoukaOptions: [],
              yewuleixingOptions: [],
            },
            TYJSFS: {
              jffs: [
                {
                  ID: "1",
                  Name: "吨",
                },
                {
                  ID: "2",
                  Name: "趟",
                },
                {
                  ID: "3",
                  Name: "公里",
                },
                {
                  ID: "4",
                  Name: "吨/公里",
                },
                {
                  ID: "5",
                  Name: "吨/(装-卸)",
                },
                {
                  ID: "6",
                  Name: "吨/公里(装-卸)",
                },
              ],
              lclx: [
                {
                  ID: "1",
                  Name: "实际里程",
                },
                {
                  ID: "2",
                  Name: "标准里程",
                },
                {
                  ID: "3",
                  Name: "标准重程",
                },
                {
                  ID: "4",
                  Name: "结算里程",
                },
                {
                  ID: "5",
                  Name: "GPS重程",
                },
              ],
              jfzl: [
                {
                  ID: "1",
                  Name: "卸货量",
                },
                {
                  ID: "2",
                  Name: "装货量",
                },
                {
                  ID: "3",
                  Name: "装卸取大",
                },
                {
                  ID: "4",
                  Name: "装卸取小",
                },
                {
                  ID: "5",
                  Name: "净重",
                },
                {
                  ID: "6",
                  Name: "毛重",
                },
                {
                  ID: "7",
                  Name: "订单数量",
                },
              ],
            },
            // 通用计费方式下拉隐射
            TYJSFSMap: {
              jffs: {
                1: "吨",
                2: "趟",
                3: "公里",
                4: "吨/公里",
                5: "吨/(装-卸)",
                6: "吨/公里(装-卸)",
              },
              lclx: {
                1: "实际里程",
                2: "标准里程",
                3: "标准重程",
                4: "结算里程",
                5: "GPS重程",
              },
              jfzl: {
                1: "卸货量",
                2: "装货量",
                3: "装卸取大",
                4: "装卸取小",
                5: "净重",
                6: "毛重",
                7: "订单数量",
              },
            },
            // 是否禁用表单输入
            isFormDataDisabled: false,
            // 提交loading
            isLoadingBtn: false,
          };
        },

        methods: {
          // 模版Change
          async handleMobandaoruChange(val) {
            const res = await axios.post(
              `/DO_SOHead/GetModel?Id=${val}`,
              {},
              {}
            );
            if (res.status === 200) {
              console.log("打印结果~~", res.data);
              this.formData = res.data;
            }
          },
          handleKehujianchengClick(field, optld, item) {
            console.log("optio", field, JSON.stringify(item));
            this.formData[field] = item[optld] || undefined;
          },
          // 客户简称
          async handleKehujianchengChange(val) {
            this.formData.SDPA8 = undefined;
            //卸货简称下拉
            const res3 = await axios.post(
              `/DO_SOHead/GetCustlist2/${val}`,
              {},
              {}
            );
            if (res3.status === 200) {
              this.yuanOptions.xiehuojianchengOptiopns = res3.data;
              this.formOptions.xiehuojianchengOptiopns = res3.data.map((item) =>
                nuteidm(item, "ADD_ShipToCode", "ADD_SearchCode")
              );
            }
          },
          close() {
            location.href = "/tmsHtml/yunfeidingdanTable.html";
          },
          async submit() {
            let f = this.formData;
            const res = await axios.post("/WeiXinOrder/Add", f, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            });
            if (res.data.state === 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              // this.close();
            } else {
              this.$message({
                message: res.data.Message,
                type: "error",
              });
            }
          },
          //计算行金额
          amount_fun() {
            let f = this.formData;
            let mtype = f.sdtom === "4";
            let v;
            if (f.sdsm === "2") {
              v = f.SDUPRC;
            } else if (f.sdsm === "3" && mtype) {
              v = f.SDUPRC * f.KMShu;
            } else if (f.sdsm === "4" && mtype) {
              v = f.SDUPRC * f.SDUORG * f.KMShu;
            } else if (f.sdsm === "5" && mtype) {
              v = f.SDUPRC * f.SDUORG;
            } else if (f.sdsm === "6" && mtype) {
              v = f.SDUPRC * f.SDUORG;
            } else {
              v = f.SDUPRC * f.SDUORG;
            }
            this.formData.SDAEXP = v.toFixed(2);
          },
          async getCustomerC() {
            //客户简称
            const res = await axios.post("/CombBox/GetCustomerC?id=1", {}, {});
            if (res.status === 200) {
              this.yuanOptions.kehujianchengOptiopns = res.data;
              this.formOptions.kehujianchengOptiopns = res.data.map((item) =>
                nuteidm(item, "ADD_Description", "ADD_SearchCode")
              );
            }
            //装货地
            const res2 = await axios.post("/CombBox/GetSource", {}, {});
            if (res2.status === 200) {
              this.yuanOptions.shenqingrenOptions = res2.data;
              this.formOptions.shenqingrenOptions = res2.data.map((item) =>
                nuteidm(item, "Id", "SearchCode")
              );
            }

            //模版
            const res4 = await axios.post("/DO_SOHead/GetSoModels", {}, {});
            if (res4.status === 200) {
              this.yuanOptions.templateNamedaoruOptiopns = res4.data;
              this.formOptions.templateNamedaoruOptiopns = res4.data.map(
                (item) => nuteidm(item, "SDDOCO", "SDDOCO")
              );
            }
            //产品代码
            const res5 = await axios.post("/CombBox/GetSDLITM?id=1", {}, {});
            if (res5.status === 200) {
              this.yuanOptions.jiayoukaOptions = res5.data;
              this.formOptions.jiayoukaOptions = res5.data.map((item) =>
                nuteidm(item, "SDLITM", "SDLITM")
              );
            }
            //单位
            const res6 = await axios.post(
              "/PublicAttribute/GetPublicAttributesTrue?typeId=15&IsTrue=1",
              {},
              {}
            );
            if (res6.status === 200) {
              this.yuanOptions.danweiOptions = res6.data;
              this.formOptions.danweiOptions = res6.data.map((item) =>
                nuteidm(item, "Name", "Name")
              );
            }
            //业务类型
            const res7 = await axios.post("/CombBox/GetBusinessType", {}, {});
            if (res7.status === 200) {
              this.yuanOptions.yewuleixingOptions = res7.data;
              this.formOptions.yewuleixingOptions = res7.data.map((item) =>
                nuteidm(item, "Id", "Name")
              );
            }
          },
        },

        async created() {
          this.getCustomerC(); //获取下拉
          let query = queryToObject();
          this.mode = query.mode;
        },
      });
    </script>
  </body>
</html>
